1.2. Media queries
CSS3 comes to our help with media
queries. These complex media definitions include conditions
about the screen size and media
values allowed.
For example, we can say: “Apply this stylesheet for devices
supporting only screen and with a
maximum device width of 480.” This will apply to an iPhone, because in
landscape mode it has a screen
width of 480px and it doesn’t support print, handheld, or any other media type. Here’s how to write this as a
conditional media query:
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width:
480px)" href="iphone.css" />
We can then target non-iPhone desktop devices with a filter
saying: “Apply this stylesheet for browsers supporting at least
screen and with a minimum device
width of 481.” This query is written as follows:<link media="screen and (min-device-width: 481px)" href="notiphone.css"
type="text/css" rel="stylesheet" />
Warning:
Internet Explorer (through version 8) does not understand CSS media queries, so it will
apply the iPhone stylesheet by default. That is why we need to add
IE conditional comments:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only
screen and (max-device-width: 480px)"
href="iphone.css" />
<!--<![endif]-->
Some browsers also understand CSS media queries inside the same
stylesheet file. For example, the following code will change the
background color displayed on an iPhone (and other similar
devices):
@media only screen and (max-device-width: 480px) {
body {
background-color: red;
}
}
An extension for conditional media queries is the orientation media
query, which allows us to define different styles for different
orientations. There are two possibilities: orientation:portrait and orientation:landscape. For a device running
iOS 3.2 or later, you can use the orientation media query as follows:
<link rel="stylesheet" media="all and (orientation:landscape)" href="land.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="port.css" />
iPhone 4 comes with a 326-DPI screen, twice the original
iPhone screen. This means that this new device has double width,
double height in the same physical screen size. That is why Apple
decided to give its browser the same CSS, viewport, and JavaScript
dimensions as the low-DPI device, 320×480, and created a pixel-ratio
of 2. This means that for every pixel, four real pixels will be
drawn (a 2× zoom). Therefore, your website will render equally in
iPhone 3GS or iPhone 4 beyond the clearer text. If you still want to
show something different for iPhone 4 (as a high-DPI image) you can
use the new media query condition -webkit-min-device-pixel-ratio: <link media="all and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" type="text/css" rel="stylesheet" />
|
The orientation query also works in Android from 2.0, in MicroB
for MeeGo devices like the Nokia N900, and in Firefox Mobile.
Table 2 provides a more
complete list of browser compatibility for CSS media queries and the
orientation extension.
Table 2. CSS3 conditional media queries compatibility table
Browser/platform | Conditional media
queries compatibility | Orientation
support |
---|
Safari | Yes | Yes, from OS
3.2 |
Android
browser | Yes | Yes from
2.0 |
Symbian/S60 | Yes from
5th edition No before
5th edition | No |
Nokia Series
40 | Yes from
6th edition No before
6th edition | No |
webOS | Yes | No |
BlackBerry | No | No |
NetFront | No | No |
Openwave
(Myriad) | No | No |
Internet
Explorer | No | No |
Motorola Internet
Browser | No | No |
Opera
Mobile | Yes | No |
Opera
Mini | Yes | No |